<script setup>
import TeamScoreBar from '/src/components/TeamScoreBar.vue'
import { onMounted, onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router'
import getRequest, {downloadFiles} from '../../utils/lxw_request';


const scores = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]

const excellent_teams_ref = ref(null)

const router = useRouter()
function goToMyPractice() {
    const params = router.currentRoute.value.params
    router.push({ name: "my_practice", params })
}


// scroll animation
// let interval_id  = null;
// onMounted(() => {

//     interval_id = setInterval(() => {
//         // 44是一个item的高度加上margin-bottom, 176是滚动窗口的大小.
//         if (excellent_teams_ref.value.scrollTop + 44 < excellent_teams_ref.value.scrollHeight - 176) {
//             excellent_teams_ref.value.scrollTop += 44
//             // console.log('roll', excellent_teams_ref.value.scrollTop)
//         } else {
//             excellent_teams_ref.value.scrollTop = 0
//             // console.log('reset', excellent_teams_ref.value.scrollTop)
//         }

//     }, 1500)
// })

// onUnmounted(() => {
//     clearInterval(interval_id);
// })

// 获取课程详细信息
const course_id = router.currentRoute.value.params['subject_id']
const course = ref(null)
getCourse();


function getCourse() {
    getRequest(`/stu/course/${course_id}`, "GET", new Headers({ 'Content-Type': 'application/json' }))
        .then((response) => response.json())
        .then((json) => {
            if (json.code === 200) {
                course.value = json.data;
            } else {
                alert(json.msg);
            }
        })
        .catch((err) => {
            console.error(err);
        })
}



</script>

<template>
    <div class="subject-container">
        <div class="subject" v-if="course != null">
            <div class="subject-content">
                <p style="font-size: 32px;">{{ $t('subjectsJoinedDetail.subject_title') }}<span>{{ course['courseName']
                }}</span></p>
                <p style="font-size: 22px;">{{ $t('subjectsJoinedDetail.subject_teacher') }}<span>{{
                    course['teachers'].reduce((pre, cur) => `${pre} ${cur['name']}`, "") }}</span></p>
                <p>{{ $t('subjectsJoinedDetail.subject_detail_and_requirement') }}</p>
                <div class="subject-detail">
                    <div class="detail">
                        <p>{{ $t('subjectsJoinedDetail.subject_detail_preparation') }}</p>
                        <p>{{ course['coursePre'] }}</p>
                    </div>
                    <div class="detail">
                        <p>{{ $t('subjectsJoinedDetail.subject_task_requirement') }}</p>
                        <p>{{ course['courseReq'] }}</p>
                    </div>
                </div>
            </div>
            <div class="subject-appendix">
                <div class="my-practice-contanier">

                    <button class="my-practice" @click="goToMyPractice">{{ $t('subjectsJoinedDetail.subject_my_practice')
                    }}</button>
                </div>
                <p style="font-weight: bold;">{{ $t('subjectsJoinedDetail.subject_appendix_file') }}</p>
                <div class="appendix-file">
                    <ul>
                        <li v-for="file in course['files']"><span class="file-link" @click="downloadFiles(file['fileId'], file['fileName'])" >{{ file['fileName'] }}</span></li>

                    </ul>
                </div>
                <!-- <p style="font-weight: bold;" >{{$t('subjectsJoinedDetail.subject_excellent_teams')}}</p>
                        <div class="excellent-teams" ref="excellent_teams_ref" >
                            <TeamScoreBar  v-for="(score, index) in scores" v-bind="{score: score, teamName: `Team${index+1}`, rank: index+1}"  style="width: 424px; margin-bottom: 13px;" />
                        </div> -->
            </div>
        </div>
    </div>
</template>


<style scoped>
.subject-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.subject {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    width: 1057px;
    height: 662px;
    flex-wrap: wrap;
    margin: 50px 0;
    border-radius: 10px;
}


/* 课题的名称 指导老师 细节和要求 */
.subject-content,
.subject-appendix {
    width: 50%;
    height: 100%;
    padding: 35px;
}

.subject-content p {
    font-family: Source Han Sans CN;
    color: #707070;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: bold;
}

.subject-content p>span::before {
    content: ": ";

}

/* .subject-content p::after {
    content: ": ";
} */

.subject-detail {
    background-color: #e2e2e2;
    height: 450px;
    padding: 24px 33px;
}

.detail {
    margin-bottom: 18px;
}

.detail p {
    font-size: 14px;
    font-weight: normal;
}

.detail p:first-child {
    font-size: 18px;
    margin-bottom: 18px;
    font-weight: bold;
}


/* 课题的附件 和 我的实践 */
.subject-appendix p {
    font-family: Source Han Sans CN;
    color: #707070;
    font-size: 20px;
    margin-bottom: 10px;
}

.subject-appendix p::after {
    content: ": ";
}

.my-practice-contanier {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    margin-bottom: 52px;
}

.my-practice {
    display: block;
    border: none;
    width: 120px;
    height: 37px;
    background-color: #8493a6;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    font-family: Source Han Sans CN;
    font-size: 18px;
    color: #fafafa;
    text-align: center;
    cursor: pointer;
    line-height: 37px;
}

.my-practice:hover {
    opacity: 0.85;
}

.my-practice:active {
    transform: translateY(3px);
}

.appendix-file {
    height: 200px;
    border: 1px solid #707070;
    padding: 12px;
    overflow: auto;
    margin-bottom: 25px;
}

.appendix-file>ul>li {
    list-style: none;
    height: 32px;

}

.appendix-file>ul>li::before {
    content: url("/src/assets/images/student/file.svg");
    vertical-align: middle;
}

.file-link {
    display: inline-block;
    text-decoration: underline;
    color: #0000EE;
    cursor: pointer;
    opacity: 0.7;
}

.file-link:hover {
    opacity: 1;
}

.file-link:visited {
    color: #872bff;
}

.excellent-teams {
    height: 200px;
    padding: 12px;
    overflow: hidden;
    scroll-behavior: smooth;
}
</style>